<template>
	<div class="info">
		<div class="menu-title">{{menu_title}}</div>
		<div class="submenu-title">{{submenu_title}}</div>
	</div>
</template>

<script>
export default {
	props: ['menu_title', 'submenu_title'],
};
</script>

<style lang="scss" scoped>
.info {
	height: 100px;
	display: flex;
	align-items: center;
	.menu-title {
		font-size: 28px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		padding: 0 15px;
		position: relative;

		&::before {
			position: absolute;
			content: '';
			left: 0;
			top: 9px;
			width: 3px;
			height: 25px;
			background: #cccccc;
		}
	}
	.submenu-title {
		font-size: 20px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		margin-top: 10px;
	}
}
</style>